<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>积分充值记录</h2>
        </div>
      </div>
      <div class="normal-box-bd">
        <Card  style="margin-bottom: 10px;">
          <div class="normal-list-page-hd clearfix">
            <Input placeholder="用户卡号" class="mr-10" v-model="queryData.cardId" style="width: 150px" :clearable=true />
            <Input placeholder="订单号" class="mr-10" v-model="queryData.orderSn"  style="width: 250px" :clearable=true />
            <Input placeholder="用户微信id" class="mr-10" v-model="queryData.openid"  style="width: 250px" :clearable=true />
            <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click="inQuire">查询</Button>
          </div>
        </Card>
        <div class="normal-list-page-mod">
          <div class="normal-list-page-bd">
            <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData" @on-selection-change="selectionChange"></Table>
          </div>
          <div class="normal-list-page-ft clearfix">
            <Page class="fr" :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page"
                  @on-change="changePage" @on-page-size-change="onPageSizeChange" show-elevator show-total
                  show-sizer></Page>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import MallBillApi from '@/api/mall/MallIntegralPay.js'
import { Message } from 'iview'
export default {
  name: 'mallIntegralPay',
  data () {
    return {

      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          /** 开始自动生成 */
          { title: 'id', key: 'id', align: 'center', width: '100px' },
          { title: '订单', key: 'orderSn', align: 'center', width: '230px' },
          { title: 'openid', key: 'openid', align: 'center', width: '260px' },
          { title: '卡号', key: 'cardId', minWidth: 100, align: 'center' },
          { title: '充值金额（分）', key: 'money', minWidth: 100, align: 'center' },
          { title: '状态',
            key: 'status',
            minWidth: 100,
            align: 'center',
            render: (h, params) => {
              if (params.row.status === false) {
                return h('div', '取消支付')
              } else if (params.row.status === true) {
                return h('div', '支付成功')
              }
            }
          },
          { title: '交易时间', key: 'createTime', align: 'center', width: '200px' }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        name: ''
      }
    }
  },
  methods: {
    // 获取列表
    getTableData () {
      const that = this
      that.queryData.totalRecord = undefined
      MallBillApi.getPageList(that.queryData)
        .then(res => {
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.page = res.data.pageNum
          that.queryData.limit = res.data.pageSize
        })
        .catch(error => {
          Message.error(error)
        })
    },

    // 查询
    inQuire () {
      const that = this
      that.getTableData()
    },

    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },

    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    }

  },

  created () {
    this.getTableData()
  }
}
</script>
